<script setup>
import titleBg from '@/assets/image/common/bg-subtitle.png'

defineProps({
  title: {
    type: String,
    default: '',
  },
  size: {
    type: String,
    default: '',
  },
  stretch: {
    type: Boolean,
    default: false,
  },
})
</script>

<template>
  <section class="ui-panel" :class="[stretch && 'stretch', size]">
    <div class="ui-panel__title">
      <img
        class="ui-panel__title--bg"
        height="26"
        :src="titleBg"
      >
      <span>{{ title }}</span>
    </div>
    <div class="ui-panel__content">
      <slot />
    </div>
  </section>
</template>

<style lang='scss' scoped>
.ui-panel {
  position: relative;
  width: 100%;
  min-height: 100px;

  &.stretch {
    height: 100%;

    .ui-panel__content {
      height: calc(100% - 26px);
      padding: 0;
      overflow: hidden;
    }
  }

  &.large {

    .ui-panel__title {
      &>span {
        top: 0;
        font-size: 20px;
      }
    }
  }

  &__title {
    position: relative;
    display: flex;
    align-items: center;

    &>span {
      position: absolute;
      top: 2px;
      left: 14px;
      font-size: 14px;
      font-weight: 600;
      line-height: 1;
    }

    &--bg {
      width: 100%;
    }

  }

  &__content {
    padding: 16px 20px;
  }
}
</style>
